<template>
  <div class="expert">
    <div class="header">
      <span>{{ title }}</span>
      <el-button class="button" @click="handleBack">返回</el-button>
    </div>
    <el-form :rules='roules' label-width="120px" ref="editRef">
      <el-form-item label="专家姓名" prop="username">
        <el-input v-model="user.username" />
      </el-form-item>
      <el-form-item label="专家职称" prop="userjob">
        <el-input v-model="user.userjob" />
      </el-form-item>
      <!-- 上传配图 -->
      <el-form-item label="上传配图">
        <el-upload v-model:file-list="fileList" action="#" :on-change="upload" list-type="picture-card"
          :auto-upload="false">
          <el-icon>
            <Plus />
          </el-icon>

          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <el-icon>
                    <zoom-in />
                  </el-icon>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <el-icon>
                    <Download />
                  </el-icon>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <!-- 推荐首页 -->
      <el-form-item label="推荐至首页">
        <el-select v-model="user.region" placeholder="请选择">
          <el-option label="是" value="是" />
          <el-option label="否" value="否" />
        </el-select>
      </el-form-item>
      <el-form-item label="专家简介：">
        <div style="border: 1px solid #ccc">
          <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" />
          <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
            @onCreated="handleCreated" />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import dayJS from "dayjs";

import { onBeforeUnmount, ref, shallowRef, onMounted, reactive } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import useTeamStore from "../../../store/team";
import { ElMessageBox, ElMessage } from "element-plus";

// 引入icon
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
// import  { UploadFile } from 'element-plus'
const title = ref("新增专家");
const route = useRoute();
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);
const store = useTeamStore();
const handleRemove = (file) => {
  // console.log(file.url)
};

const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};

const editorRef = shallowRef();
//返回上一级
const router = useRouter();
const handleBack = () => {
  router.back();
};
const roules = reactive({
  username: [{ required: true, message: '姓名必填', }],
  userjob: [{ required: true, message: '专家职称必填' }]
})
const user = ref([
  {
    username: "",
    userjob: "",
    avatarUrl: "",
    region: [],
  },
]);
const fileList = ref([]);

// 拿到文件url
const upload = (file) => {
  console.log(file.url);
  const res = (user.value.avatarUrl = file.url);

  console.log(res);
};
// 点击保存
const handleSave = () => {
  console.log(user.value);
  const obj = {
    region: user.value.region,
    username: user.value.username,
    userjob: user.value.userjob,
    avatarUrl: user.value.avatarUrl,
    intro: valueHtml.value,
    num: parseInt(Math.random() * 1000000),
    time: dayJS(new Date()).format("YYYY年MM月DD日"),
    zip: parseInt(Math.random() * 100),
  };
  store.addTeamList(obj);
  router.push("/team");
};

// 内容 HTML
const valueHtml = ref("");

const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

// 设置回显
if (route.query.num) {
  title.value = "编辑";
  // console.log(route.query.num)
  const res = store.filterTeamList(route.query.num);
  // console.log(res)
  user.value = res;
  valueHtml.value = res.intro;
}
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  margin: 8px 0;

  span {
    color: rgb(255, 153, 0);
    font-size: 16px;
    padding-left: 8px;
    font-weight: 800;
  }

  .button {
    float: right;
    background-color: rgb(255, 153, 0);
    color: #fff;
    margin-right: 8px;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

:deep(.el-form) {
  margin-left: 10px;
}

:deep(.el-input) {
  width: 500px;
}
</style>
